import React, { Component } from 'react'

class Navbar extends Component {
    render() {
        return (
            <div style={{ background: 'red' }}>
                <button onClick={() => {
                    // 子组件中无法访问父组件中的状态值
                    // console.log('子通知父，让父组件的isShow取反');
                    
                    this.props.event() // 调用父组件传来的回调函数，让父组件修改其属性值
                }}>click</button>
                <span>navbar</span>
            </div>
        )
    }
}

class Sidebar extends Component {
    render() {
        return (
            <div style={{ background: 'yellow', width: '200px' }}>
                <ul>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                </ul>
            </div>
        )
    }
}

export default class App extends Component {
    state = {
        isShow: false
    }

    render() {
        return (
            <div>
                {/* 子传父，父组件给子组件传一个回调函数 */}
                <Navbar event={() => {
                    this.setState({
                        isShow: !this.state.isShow
                    })
                }} />

                {/* <button onClick={() => {
                    this.setState({
                        isShow: !this.state.isShow
                    })
                }}>click</button> */}

                {this.state.isShow && <Sidebar />}
            </div>
        )
    }
}


/**
 * 父传子：属性
 * 子传父：回调函数  callback
 */